<template>
	<view>
		<!-- <u-row gutter="16" justify="center" style="background: #1E88E5;">
			<u-col span="11">
				<u-search shape="square" bg-color="#fff" placeholder="请扫码确认放行" action-text="查询" focus :action-style="actionStyle" v-model="keyword" style="margin: 48rpx 0 30rpx 0;" @search="search" @custom="search" @change="search"></u-search>
			</u-col>
		</u-row> -->
		<scroll-view v-if="Object.keys(info).length > 0" class="scroll" scroll-y="true">
			<view v-if="info.type==3" class="title">{{info.status==-1?'来访申请中':info.status==0?'主管审批中':info.status==10?'环安卡控中':info.status==20?'审批未通过':info.status==25?'确认进门中':info.status==30?'刷脸进门':info.status==40?'确认出门中':'已出门'}}</view>
			<view v-else class="title">{{info.status==-1?'来访申请中':info.status==0?'主管审批中':info.status==10?'请确认进门':info.status==20?'审批未通过':info.status==30?'刷脸进门':info.status==40?'请确认出门':'已出门'}}</view>
			<view class="box">
				<u-row gutter="16">
					<view class="head-title">{{info.type==1?'访客':info.type==2?'司机':info.type==3?'施工':''}}人员信息</view>
				</u-row>
				<u-row gutter="16" style="margin-top: 25rpx;">
					<u-col span="12">
						<view class="apply-text">姓名：{{info.visitor}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">手机：{{info.vphone}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">性别：{{info.sex==1?'男':'女'}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">身份证：{{info.idCard}}</view>
					</u-col>
					<u-col span="12">
						<u-form-item label="身份证照片" label-width="150" :border-bottom="false" class="apply-text">
							<u-upload :file-list="idCardImgList" max-count="1" :show-progress="false" image-mode="widthFix" :deletable="false" custom-btn></u-upload>
						</u-form-item>
					</u-col>
					<u-col span="12">
						<view class="apply-text">来访单位：{{info.vcompany}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">来访人数：{{info.vnum}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">开始时间：{{info.visitTime}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">结束时间：{{info.vendTime}}</view>
					</u-col>
					<u-col v-if="info.type==2 || info.type==3" span="12">
						<view class="apply-text">{{info.type==2?'进入':'施工'}}区域：{{info.visitArea}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">拜访事由：{{info.vreason}}</view>
					</u-col>
					<u-col span="12">
						<u-form-item label="头像" label-width="150" :border-bottom="false" class="apply-text">
							<u-upload :file-list="vimgList" max-count="1" :show-progress="false" image-mode="widthFix" :deletable="false" custom-btn></u-upload>
						</u-form-item>
					</u-col>
					<u-col v-if="info.type==2 || info.type==3" span="12">
						<view class="apply-text">车牌号：{{info.carNo}}</view>
					</u-col>
					<u-col v-if="info.type==2 || info.type==3" span="12">
						<u-form-item label="证件/自带货" label-width="150" label-position="top" :border-bottom="false" class="apply-text">
							<u-upload :file-list="docImgList" max-count="9" :show-progress="false" image-mode="widthFix" :deletable="false" custom-btn></u-upload>
						</u-form-item>
					</u-col>
					<u-col v-if="info.type==2" span="12">
						<u-form-item label="货物图片" label-position="top" label-width="150" style="font-size: 24rpx;color: #000;">
							<u-upload ref="goodsUpload" :file-list="goodsList" max-count="9" :show-progress="false" image-mode="widthFix" custom-btn></u-upload>
						</u-form-item>
					</u-col>
					<u-col v-if="info.type==2" span="12">
						<view class="apply-text">自带货备注：{{info.hwImg}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="box">
				<u-row gutter="16">
					<view class="head-title">{{info.type==1?'被访人':info.type==2?'仓管人员':info.type==3?'施工部门负责人':''}}信息相关</view>
				</u-row>
				<u-row gutter="16" style="margin-top: 25rpx;">
					<u-col span="12">
						<view class="apply-text">部门：{{info.deptIdName}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">审批人：{{info.lastLeaderName?info.lastLeaderName:info.leaderIdRealName}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">被访人：{{info.staff}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text">手机：{{info.iphone}}</view>
					</u-col>
				</u-row>
			</view>
			<view style="height: 50rpx;"></view>
		</scroll-view>
		<u-row v-if="info.type>3" gutter="32" class="foot">
			<u-col span="12">
				<u-button type="error" @click="show = true">结束来访</u-button>
			</u-col>
		</u-row>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button content="确定取消预约吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				docImgList: [],
				idCardImgList: [], // 身份证照片列表
				vimgList: [],  // 头像列表
				show: false,
				actionStyle: {
					color: '#fff'
				},
				keyword: '',
				info: {}
			}
		},
		onLoad(options) {
			this.keyword = options.id
			this.getDetail()
		},
		methods: {
			confirm() {
				this.$u.post('/visitLogExtend/update',{...this.info,status:50}).then(res => {
					if(res.code==200){
						this.$u.toast('结束来访成功')
						uni.navigateBack()
					}else{
						this.$u.toast('删除失败',res.message)
					}	
				}).catch(err => {
					this.$u.toast('删除异常', err)
				})
			},
			reject() {
				this.show = true
			},
			agree() {
				if(this.info.type==2 && this.info.status==40) {
					if(this.info.goodsInfo) {
						this.info.goodsInfo = JSON.stringify(this.info.goodsInfo)
					}else{
						return this.$u.toast('货物图片至少1张')
					}
				}
				this.$u.post('/visitLogExtend/update',{...this.info,status:0}).then(res => {
					if(res.code==200){
						this.getDetail()
						this.$u.toast('确认放行成功')
					}else{
						this.$u.toast(res.message)
					}	
				}).catch(err => {
					this.$u.toast(err)
				})
			},
			getDetail() {
				this.$u.get('/visitlogextend/detail',{Id:this.keyword}).then(res => {
					if(res.code==200){
						if(res.result==null) {
							this.info = {}
						}else{
							this.info = res.result
							if(this.info.idCardImg) {
								this.idCardImgList.push({ url: this.info.idCardImg })
							}
							if(this.info.vimg) {
								this.vimgList.push({ url: this.info.vimg })
							}
							if(this.info.docImg) {
								this.docImgList = JSON.parse(res.result.docImg)
							}
							if(this.info.goodsInfo) {
								this.goodsList = JSON.parse(res.result.goodsInfo)
							}
						}
					}else{
						this.info = {}
						this.$u.toast('请求失败',res.message)
					}	
				}).catch(err => {
					this.info = {}
					this.$u.toast('请求异常',err)
				})
			},
			search() {
				this.getDetail()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 30rpx);
		width: 100%;
	}
	
	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 46rpx 0 5rpx 32rpx;
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		margin: auto;
		margin-top: 30rpx;
		padding: 10rpx;
		border-radius: 12rpx;
	}
	
	.head-title {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #555;
	}
	
	.apply-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #555;
		margin: 8rpx;
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		border-top: 1rpx solid #F5F5F5;
		background: #fff;
	}
</style>
